import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Chargement...

Dans cet exemple :

• React.lazy est utilisé pour charger paresseusement MyComponent.
• Suspense enveloppe LazyComponent.
• La propriété fallback fournit une interface utilisateur de repli (un indicateur de chargement) qui s'affiche pendant le chargement de MyComponent.

Implémentation des Error Boundaries

Alors que Suspense gère les états de chargement, Error Boundaries sont des composants React qui interceptent les erreurs JavaScript n'importe où dans leur arborescence de composants enfants, enregistrent ces erreurs et affichent une interface utilisateur de repli au lieu de planter l'ensemble de l'arborescence de composants.

Comment fonctionnent les Error Boundaries

Les Error Boundaries sont des composants de classe qui définissent les méthodes de cycle de vie suivantes :

• static getDerivedStateFromError(error) : Cette méthode est appelée après qu'une erreur a été lancée par un composant descendant. Elle reçoit l'erreur qui a été lancée en argument et doit renvoyer une valeur pour mettre à jour l'état.
• componentDidCatch(error, info) : Cette méthode est appelée après qu'une erreur a été lancée par un composant descendant. Elle reçoit l'erreur et un objet d'informations contenant des informations sur le composant qui a lancé l'erreur. C'est l'endroit idéal pour enregistrer l'erreur dans un service tel que Sentry ou Bugsnag.

Important : Les Error Boundaries n'interceptent les erreurs que dans les composants situés en dessous d'eux dans l'arborescence. Un Error Boundary ne peut pas intercepter une erreur en lui-même.

Exemple : Implémentation de base d'un Error Boundary

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Mettez à jour l'état afin que le prochain rendu affiche l'interface utilisateur de repli.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // Vous pouvez également enregistrer l'erreur dans un service de rapport d'erreurs
 console.error('Erreur interceptée : ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // Vous pouvez rendre n'importe quelle interface utilisateur de repli personnalisée
 return 
Quelque chose s'est mal passé.
;
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Pour utiliser l'Error Boundary, enveloppez tout composant susceptible de lancer une erreur :

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Intégration de Suspense et des Error Boundaries

La véritable puissance vient de la combinaison de Suspense et des Error Boundaries. Cela vous permet de gérer à la fois les états de chargement et les erreurs en douceur au sein de votre application. La pratique recommandée consiste à envelopper Suspense avec un Error Boundary. De cette façon, si le composant en chargement paresseux ne parvient pas à se charger (par exemple, une erreur réseau), l'Error Boundary peut intercepter l'erreur et afficher un message utile à l'utilisateur.

Exemple : Combinaison de Suspense et des Error Boundaries

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Chargement...